<!-- Licensed under a BSD license. See license.html for license -->
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <title>WebGL - Triangle with position for color</title>
  <link type="text/css" href="resources/webgl-tutorials.css" rel="stylesheet" />
</head>

<body>
  <div class="description">
    test texture
  </div>
  <canvas id="canvas"></canvas>
  <div id="uiContainer">
    <div id="ui">
      <div id="x"></div>
      <div id="y"></div>
      <div id="angle"></div>
      <div id="scaleX"></div>
      <div id="scaleY"></div>
    </div>
  </div>
</body>
<!-- vertex shader -->
<script id="vertex-shader-2d" type="x-shader/x-vertex">
attribute vec4 a_position;
attribute vec4 a_color;
uniform mat4 u_mat;
varying vec4 v_color;
attribute vec2 a_texCoor;
varying vec2 v_texCoor;
attribute float a_ratio;
varying float v_ratio;
void main() {
  gl_Position = u_mat * a_position;
  v_color = a_color;
  v_texCoor = a_texCoor;
  v_ratio = a_ratio;
}
</script>
<!-- fragment shader v_color+vec4(v_texCoor,0.5,0.5); -->
<script id="fragment-shader-2d" type="x-shader/x-fragment">
precision mediump float;
varying vec2 v_texCoor;
varying vec4 v_color;
uniform sampler2D u_sampler;
uniform sampler2D u_sampler2;
varying float v_ratio;
uniform float u_usetex2;
void main() {
  
  vec4 tmp=vec4(1.0,1.0,1.0,1.0);
  if (u_usetex2 > float(0)){
    if(v_texCoor.x > v_ratio ){
      tmp = texture2D(u_sampler2, v_texCoor+vec2(-v_ratio,0));
    }else{
      tmp = texture2D(u_sampler, v_texCoor+vec2(1.0-v_ratio,0));
    }
  }else{
    if(v_texCoor.x > v_ratio ){
      tmp = texture2D(u_sampler, v_texCoor+vec2(-v_ratio,0));
    }else{
      tmp = texture2D(u_sampler2, v_texCoor+vec2(1.0-v_ratio,0));
    }
  }
  
  float grey = dot(tmp.xyz, vec3(0.299, 0.587, 0.114));
  gl_FragColor.xyz = vec3(grey,grey,grey);
  gl_FragColor.w = tmp.w;

}
</script>
<!--
for most samples webgl-utils only provides shader compiling/linking and
canvas resizing because why clutter the examples with code that's the same in every sample.
See https://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
and https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
for webgl-utils, m3, m4, and webgl-lessons-ui.
-->
<script src="resources/webgl-utils.js"></script>
<script src="resources/webgl-lessons-ui.js"></script>
<script src="resources/m3.js"></script>
<script src="resources/m4.js"></script>
<script>
  "use strict";

  function main() {
    // Get A WebGL context
    /** @type {HTMLCanvasElement} */
    var canvas = document.querySelector("#canvas");
    var gl = canvas.getContext("webgl");
    if (!gl) {
      return;
    }

    // setup GLSL program
    var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-2d", "fragment-shader-2d"]);

    webglUtils.resizeCanvasToDisplaySize(gl.canvas);

    // Tell WebGL how to convert from clip space to pixels
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    // Clear the canvas.
    gl.clear(gl.COLOR_BUFFER_BIT);

    // Tell it to use our program (pair of shaders)
    gl.useProgram(program);

    let data1 = new Float32Array([
      -0.5, 0.5, 0, 1,
      -0.5, -0.5, 0, 1,
      0.5, 0.5, 0, 1,
      0.5, -0.5, 0, 1
    ]);
    let data2 = new Float32Array([
      1, 0.5, 0, 1,
      1, 0, 1, 1,
      1, 1, 0, 1,
      1, 1, 0, 1]);
    let data3 = new Float32Array([
      0, 1,
      0, 0,
      1, 1,
      1, 0]);
    var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
    var positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      data1,
      gl.STATIC_DRAW);
    gl.enableVertexAttribArray(positionAttributeLocation);
    gl.vertexAttribPointer(
      positionAttributeLocation, 4, gl.FLOAT, false, 0, 0);

    var colorAttr = gl.getAttribLocation(program, "a_color");
    var colorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      data2,
      gl.STATIC_DRAW);
    gl.enableVertexAttribArray(colorAttr);
    gl.vertexAttribPointer(
      colorAttr, 4, gl.FLOAT, false, 0, 0);

    var texCoorAttr = gl.getAttribLocation(program, "a_texCoor");
    var texCoBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, texCoBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      data3,
      gl.STATIC_DRAW);
    gl.enableVertexAttribArray(texCoorAttr)
    gl.vertexAttribPointer(texCoorAttr, 2, gl.FLOAT, false, 0, 0)

    var matrixLocat = gl.getUniformLocation(program, "u_mat");
    var matData = m4.orthographic(0, 1, 1, 0, -1, 1);
    matData = m4.translate(matData, 0.5, 0.5, 0);
    matData = m4.scale(matData, 0.5, 0.5, 1);

    matData = m4.zRotate(matData, 0.02);
    gl.uniformMatrix4fv(matrixLocat, false, matData);
    var rotate = function () {
    }
    // Draw the scene.
    function drawScene() {
      var primitiveType = gl.TRIANGLE_STRIP;
      var offset = 0;
      var count = 4;
      gl.drawArrays(primitiveType, offset, count);
    }
    var va = 0;
    var counter = 1
    var changeColor = function () {
      va = va + 0.002;
      if (va > 1) {
        counter = counter + 1;
        va = 0;
      }

      var ratData = new Float32Array([va, va, va, va, va, va]);
      var ratioAttributeLocation = gl.getAttribLocation(program, "a_ratio");

      var ratioBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, ratioBuffer);
      gl.bufferData(
        gl.ARRAY_BUFFER,
        ratData,
        gl.STATIC_DRAW);
      gl.enableVertexAttribArray(ratioAttributeLocation);
      gl.vertexAttribPointer(
        ratioAttributeLocation, 1, gl.FLOAT, false, 0, 0);
    }
    var changeTex = function () {
      var v_usetex2AttrLoc = gl.getUniformLocation(program, "u_usetex2");
      if (counter % 2 == 0) {
        gl.uniform1f(v_usetex2AttrLoc, 1);
      } else {
        gl.uniform1f(v_usetex2AttrLoc, -1);
      }
    }

    var oneIsOk = false;
    var twoIsOk = false;
    function func() {
      if (oneIsOk && twoIsOk) {
        rotate();
        changeColor();
        changeTex()
        drawScene();
        requestAnimationFrame(func);
      }
    }
    // func();

    let img = new Image();
    // img.crossOrigin = "anonymous";
    img.addEventListener('load', function () {
      let sampler = gl.getUniformLocation(program, "u_sampler");
      let texture = gl.createTexture();
      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
      gl.activeTexture(gl.TEXTURE0);
      gl.bindTexture(gl.TEXTURE_2D, texture);
      // let's assume all images are not a power of 2
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);
      gl.uniform1i(sampler, 0);
      oneIsOk = true;
      func();
    })
    img.src = "resources/leaves.jpg"

    let img2 = new Image();
    // img.crossOrigin = "anonymous";
    img2.addEventListener('load', function () {
      let sampler = gl.getUniformLocation(program, "u_sampler2");
      let texture = gl.createTexture();
      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
      gl.activeTexture(gl.TEXTURE1);
      gl.bindTexture(gl.TEXTURE_2D, texture);
      // let's assume all images are not a power of 2
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img2);
      gl.uniform1i(sampler, 1);
      twoIsOk = true;
      func();
    })
    img2.src = "resources/keyboard.jpg"
  }

  main();
</script>

</html>